
<template>
  <el-dialog title="请选择样式:" width="700px" :visible.sync="isShow" append-to-body>
      <table style="width:100%">
          <tr>
              <td style="font-weight:bold" align="center">检索</td>
              <el-input v-model="txtsearch" placeholder="报告单元名称" ref="refsearch"></el-input>
              <td align="right">
                  <el-button type="primary" icon="el-icon-success" @click="confirm">确 定</el-button>
                  <el-button icon="el-icon-close" @click="isShow = false">取 消</el-button>
              </td>
          </tr>
      </table>
      <vxe-table :data.sync="list" height="400px" highlight-current-row ref="xTable1" :loading="loadingStyle" highlight-hover-row highlight-hover-column resizable show-header-overflow="tooltip" border fit show-overflow="tooltip" header-align="center" size="mini" stripe @cell-dblclick="confirm" @current-change="currentChangeEvent">
          <vxe-table-column type="index" title="NO." width="50"></vxe-table-column>
          <vxe-table-column :field="items.field" :key="items.field" :title="items.title" :width="items.width" sortable v-for="items in poptableColumnStyle"></vxe-table-column>
      </vxe-table>
      <div style="display:none">
          <button type="button" @click="isSuccess">
              <span>
                  {{text.btn.confirmBtnText}}
              </span>
          </button>
      </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
      return {
          txtsearch: "",
          loadingStyle: true,
          isShow: true,
          okFirstLoading: true,
          poptableDataStyle: [],
          poptableColumnStyle: [],
          text: {
              btn: {
                  confirmBtnText: "确定",
                  cancelBtnText: "取消",
              },
          },
          code: "",
          name: "",
      };
  },
  watch: {
      txtsearch(newval, oldval) {
          if (newval != oldval) {
              this.okFirstLoading = true;
          }
      },
  },
  computed: {
      list() {
          if (this.txtsearch != "") {
              let rest = this.poptableDataStyle;
              if (this.txtsearch != "") {
                  rest = rest.filter((item) => item.rptstylename.indexOf(this.txtsearch) > -1);
              }
              return rest;
          } else {
              return this.poptableDataStyle;
          }
      },
  },
  mounted() {},
  created() {
      this.loadingStyle = true;
      this.$tool
          .request({
              url: "/ucent/ddl",
              method: "post",
              data: {
                  action: "InitRptUnitStyle",
              },
          })
          .then((resp) => {
              this.poptableDataStyle = resp.Data;
              this.poptableColumnStyle = resp.Cols;
              this.loadingStyle = false;
          })
          .catch((e) => {
              this.loadingStyle = false;
              console.log("error", e);
          });
  },
  updated() {
      if (this.okFirstLoading) {
          this.$nextTick(() => {
              let currentrow = this.$refs.xTable1.getData(0);
              if (currentrow) {
                  this.okFirstLoading = false;
                  this.$refs.xTable1.setCurrentRow(currentrow);
                  this.code = currentrow.rptstyleid;
                  this.name = currentrow.rptstylename;
              }
          });
      }
      this.$refs.refsearch.focus();
  },
  methods: {
      currentChangeEvent({ row }) {
          this.code = row.rptstyleid;
          this.name = row.rptstylename;
      },
      confirm() {
          this.isSuccess();
          this.isShow = false;
      },
      isSuccess() {},
  },
};
</script>
  